<template>
  <el-dialog
    title="减播"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="50%">
    <div>
          <div class="mod-config">
            <!--<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">-->
              <!--<el-form-item>-->
                <!--<el-input size="mini" v-model="dataForm.title" placeholder="标题/描述" clearable-->
                          <!--@change="getDataList()"></el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item>-->
                <!--<el-input size="mini" v-model="dataForm.width" placeholder="宽" clearable-->
                          <!--@change="getDataList()"></el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item>-->
                <!--<el-input size="mini" v-model="dataForm.height" placeholder="高" clearable-->
                          <!--@change="getDataList()"></el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item>-->
                <!--<el-button size="mini" @click="getDataList()">查询</el-button>-->
              <!--</el-form-item>-->
            <!--</el-form>-->
            <el-table
              size="mini"
              :data="dataList"
              height="380"
              v-loading="dataListLoading"
              @selection-change="selectionChangeHandle"
              @select="selectHandle"
              style="width: 100%;"
              row-key="id"
              ref="multipleTable"
            >
              <el-table-column
                type="selection"
                header-align="center"
                align="center"
                reserve-selection
                width="30">
              </el-table-column>
              <!--<el-table-column-->
                <!--prop="id"-->
                <!--header-align="center"-->
                <!--align="center"-->
                <!--label="ID"-->
                <!--width="40">-->
              <!--</el-table-column>-->
              <el-table-column
                prop="programName"
                header-align="center"
                align="center"
                :cell-style="{'text-align':'center'}"
                label="节目名称">
              </el-table-column>
              <el-table-column
                prop="canvasHeight"
                header-align="center"
                align="center"
                :cell-style="{'text-align':'center'}"
                label="分辨率">
                <template slot-scope="scope">
                  {{scope.row.width}} * {{scope.row.height}}
                </template>
              </el-table-column>
            </el-table>
          </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submit()">确定</el-button>
    </span>
    </div>
  </el-dialog>
</template>
<style scoped>
  .el-dialog__body {
    padding: 10px !important;
  }

  .el-button.is-circle {
    padding: 7px !important;
  }
</style>
<script>
  export default {
    data: function () {
      return {
        deviceIds: [],
        dataList: [],
        dataListLoading: false,
        dataListSelections: [],
        visible: false
      }
    },
    mounted () {
    },
    methods: {
      // 获取数据列表
      getDataList: function () {
        this.dataListLoading = true
        console.log(this.deviceIds)
        this.$http({
          url: this.$http.adornUrl('/sys/theme/by-device'),
          method: 'post',
          data: this.$http.adornData(this.deviceIds, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log(data)
            this.dataList = data.list
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      selectHandle (selection, row) {
        if (!this.verifyRatio(row)) {
          this.showTip = true
        }
      },
      reload: function (event) {
        this.getDataList()
      },
      init: function (data) {
        this.visible = true
        this.deviceIds = data
        this.getDataList()
      },
      submit () {
        if (this.dataListSelections.length === 0) {
          this.$message.error('至少选择一个要下播的节目')
          return
        }
        var ids = this.dataListSelections.map(item => {
          return item.id
        })
        this.$http({
          url: this.$http.adornUrl('/sys/publishdevicetheme/sub-play'),
          method: 'post',
          data: this.$http.adornData({
            dids: this.deviceIds,
            tids: ids
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      }
    }
  }
</script>
